<template>
  <div class="content">
    <div class="titleContent" :style="comStyle">
      <div class="titleBefore">▍</div>
      <ul>
        <li>{{ title }}</li>
        <li
          v-for="(v, index) in titleArr"
          :key="index"
          @click="itemClick(v)"
          v-show="titleOption"
        >
          {{ v.text }}
        </li>
      </ul>
      <div class="title" @click="downClick">﹀</div>
    </div>
    <div class="minContent" ref="echarts"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      chartInstance: null,
      data: [],
      title: "商品销量趋势",
      titleOption: false,
      titleArr: [],
      chooseTypeData: "commodity",
      a: [],
      titleSize: 0,
    };
  },
  computed: {
    comStyle() {
      return {
        fontSize: this.titleSize + "px",
      };
    },
  },
  mounted() {
    this.init();
    this.getData();
    window.addEventListener("resize", this.widthChange);
    this.widthChange();
  },
  destroyed() {
    //  防止内存泄漏
    window.removeEventListener("resize", this.widthChange);
  },
  destroyed() {
    window.removeEventListener("resize", this.widthChange);
  },
  methods: {
    //初始化
    init() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts, "chalk");
      const initOption = {
        xAxis: {
          type: "category",
          boundaryGap: false,
        },
        tooltip: {
          trigger: "axis",
        },
        yAxis: {
          type: "value",
          nameTextStyle: {
            color: "#ffffff",
            nameLocation: "start",
          },
        },
        grid: {
          top: "35%",
          left: "6%",
          right: "6%",
          bottom: "6%",
          containLabel: true,
        },
        legend: {
          left: 20,
          top: "15%",
          icon: "circle",
        },
      };
      this.chartInstance.setOption(initOption);
    },
    // 获取数据
    async getData() {
      const { data: res } = await this.$http.get("trend");
      console.log(res);
      this.data = res;
      this.a = Object.assign([], this.data.type);
      this.titleArr = this.a;
      console.log(this.titleArr);
      this.updateEchart();
    },
    //处理数据
    updateEchart() {
      let XData = [];
      let valueArr = [];
      let legendData = [];
      const colorLinear1 = [
        "rgba(11,168,44,0.5)",
        "rgba(44,110,225,0.5)",
        "rgba(22,242,217,0.5)",
        "rgba(254,33,30,0.5)",
        "rgba(250,105,0,0.5)",
      ];
      const colorLinear2 = [
        "rgba(11,168,44,0)",
        "rgba(44,110,225,0)",
        "rgba(22,242,217,0)",
        "rgba(254,33,30,0)",
        "rgba(250,105,0,0)",
      ];
      XData = this.data.common.month;
      //y轴数据
      valueArr = this.data[this.chooseTypeData].data;
      let unit = this.data[this.chooseTypeData].unit;
      let seriesArr = valueArr.map((v, index) => {
        return {
          name: v.name,
          type: "line",
          stack: "x",
          data: v.data,
          areaStyle: {
            // 渐变颜色 new this.$echarts.graphic.LinearGradient(x1,y1,x2,y2,[{},{}]
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: colorLinear1[index],
              },
              {
                offset: 1,
                color: colorLinear2[index],
              },
            ]),
          },
        };
      });
      // legend图例数据
      legendData = valueArr.map((v) => {
        return {
          name: v.name,
        };
      });
      const dataOption = {
        xAxis: {
          data: XData,
        },
        yAxis: {
          name: "(单位：" + unit + ")",
        },
        legend: { data: legendData },
        series: seriesArr,
      };
      this.chartInstance.setOption(dataOption);
    },
    itemClick(v) {
      this.title = v.text;
      this.titleOption = false;
      this.chooseTypeData = v.key;
      this.updateEchart();
    },
    downClick() {
      this.titleOption = !this.titleOption;
      this.titleArr = this.a;
      this.titleArr = this.titleArr.filter((v) => {
        return v.text != this.title;
      });
    },
    widthChange() {
      //3. 自适应配置
      this.titleSize = (this.$refs.echarts.offsetWidth / 100) * 3.6;
      const sizeOption = {
        legend: {
          itemWidth: this.titleSize,
          itemHeight: this.titleSize,
          itemGap: this.titleSize,
          textStyle: {
            fontSize: this.titleSize / 2,
          },
        },
      };
      this.chartInstance.setOption(sizeOption);
      this.chartInstance.resize();
      this.chartInstance.resize();
    },
  },
};
</script>
<style scoped>
.titleBefore {
  float: left;
}
ul {
  padding: 0;
  margin: 0;
  float: left;
  background-color: #222733;
}
li {
  cursor: pointer;
}
.title {
  float: left;
  /* line-height: 100px; */
  padding-left: 20px;
  cursor: pointer;
  margin-top: 2%;
}
.titleContent {
  color: #ffff;
  /* font-size: 66px; */
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 99;
}
</style>